<template>
  <div class="home-container">
    <!-- 头部 -->
    <header class="home-header">
      <el-row type="flex" align="middle">
        <el-col :span="6">
          <img src="@/assets/images/index/stumalllogo.png" alt="" class="logo"/>
        </el-col>
        <el-col :span="18">
          <span class="welcome">
            <small>欢迎访问</small>
            <b>学子商城</b>
          </span>
        </el-col>
      </el-row>
    </header>

    <!-- 主体内容 -->
    <div class="main-content">
      <el-card class="menu-card">
        <div class="menu-title">请选择要浏览的页面</div>
        
        <el-row :gutter="20" class="menu-list">
          <el-col :span="8">
            <el-button type="primary" @click="$router.push('/index')">
              <i class="el-icon-s-home"></i> 网站首页
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="$router.push('/login')">
              <i class="el-icon-user"></i> 登录页面
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="$router.push('/register')">
              <i class="el-icon-user-solid"></i> 注册页面
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="$router.push('/404')">
              <i class="el-icon-warning-outline"></i> 404页面
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="$router.push('/500')">
              <i class="el-icon-warning"></i> 500页面
            </el-button>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="handleDownload">
              <i class="el-icon-download"></i> 下载全部资料
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '@/components/Main/Footer.vue'

export default {
  name: 'Home',
  components: {
    Footer
  },
  methods: {
    handleDownload() {
      // 处理下载逻辑
      // window.location.href = '/api/download/pages.zip'
    }
  }
}
</script>

<style scoped lang="scss"> 
.home-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.home-header {
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

.logo {
  height: 40px;
}

.welcome {
  float: right;
  font-size: 16px;
}

.welcome small {
  color: #999;
  margin-right: 10px;
}

.main-content {
  padding: 40px;
}

.menu-card {
  max-width: 900px;
  margin: 0 auto;
}

.menu-title {
  font-size: 20px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.menu-list {
  .el-col {
    margin-bottom: 20px;
    text-align: center;
  }

  .el-button {
    width: 80%;
    height: 45px;
    font-size: 16px;
  }
}
</style> 